/*
 * For header type 1 only
 * You may remove these if you opt header 2
 */
#header {
  .skin-switch {
    padding: 10px 0 2px;
    text-align: center;
  }

  .ss-skin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    margin: 2px 3px;
  }
}

/* ----------------------------- End header type 1 ------------------------------------- */

/*
 * For header type 2 only
 * You may remove these if you opt header 1
 */

#header-2 {
  .skin-switch {
    position: absolute;
    right: 50px;
    bottom: 23px;
    z-index: 1;

    .btn {
      background: #fff;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 25px;
      z-index: 2;
    }

    .dropdown-menu {
      min-width: 130px;
      height: 130px;
      border-radius: 50%;
      width: 130px;
      top: -42px;
      left: -40px;
      z-index: 1;
      .transform-origin(center);
      .scale-rotate(0, -360deg);
      .transition-duration(500ms);

      .ss-skin {
        position: absolute;

        &.ss-1 {
          margin-left: -8px;
          top: 12px;
          left: 50%;
        }

        &.ss-2 {
          right: 24px;
          top: 26px;
        }

        &.ss-3 {
          top: 50%;
          margin-top: -8px;
          right: 12px;
        }

        &.ss-4 {
          right: 24px;
          bottom: 26px;
        }

        &.ss-5 {
          margin-left: -8px;
          bottom: 12px;
          left: 50%;
        }

        &.ss-6 {
          left: 24px;
          bottom: 26px;
        }

        &.ss-7 {
          top: 50%;
          margin-top: -8px;
          left: 12px;
        }

        &.ss-8 {
          left: 24px;
          top: 26px;
        }
      }
    }

    &.open {
      .dropdown-menu {
        .scale-rotate(1, 0deg);
      }
    }
  }
}

/* ----------------------------- End header type 2 ------------------------------------- */

/*
 * Do not remove these
 * This is common for both
 */
.ss-skin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;

  &:hover {
    .opacity(0.8);
  }
}

.current-skin(@color) {
  background-color: @color;

  .ss-icon {
    color: @color;
  }

  .ha-menu {
    @media (max-width: @screen-xs-max) {
      background: @color;
    }
  }
}

[data-current-skin="lightblue"] {
  .current-skin(@m-lightblue);
}

[data-current-skin="bluegray"] {
  .current-skin(@m-bluegray);
}

[data-current-skin="blue"] {
  .current-skin(@m-blue);
}

[data-current-skin="purple"] {
  .current-skin(@m-purple);
}

[data-current-skin="orange"] {
  .current-skin(@m-orange);
}

[data-current-skin="cyan"] {
  .current-skin(@m-cyan);
}

[data-current-skin="green"] {
  .current-skin(@m-green);
}

[data-current-skin="teal"] {
  .current-skin(@m-teal);
}

[data-current-skin="pink"] {
  .current-skin(@m-pink);
}